<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>cron表达式生成</title>
        <script src="later.js"></script>
        <style>
            .no-display {
                display: none;
            }
        </style>
    </head>
    <body>
        <div>
            <span id="fold" onclick="fold()">折叠/展开</span> 秒 分 时 日 月 星期 年
        </div>
        <div id="detail" style="border: 1px solid rgb(56, 89, 18);">
            <div>
                <p>
                    Seconds : 可出现", - * /"四个字符，有效范围为0-59的整数
                </p>
                <p>
                    Minutes : 可出现", - * /"四个字符，有效范围为0-59的整数
                </p>
                <p>
                    Hours : 可出现", - * /"四个字符，有效范围为0-23的整数
                </p>
                <p>
                    DayofMonth : 可出现", - * / ? L W C"八个字符，有效范围为0-31的整数,
                    L 表示一个月最后一天,
                    W 表示最近的工作日,  5W 表示 5号后的工作日
                </p>
                <p>
                    Month : 可出现", - * /"四个字符，有效范围为1-12的整数或JAN-DEc
                </p>
                <p>
                    DayofWeek : 可出现", - * / ? L C #"四个字符，有效范围为1-7的整数或SUN-SAT两个范围。1表示星期天，2表示星期一， 依次类推
                </p>
                <p>
                    Year : 可出现", - * /"四个字符，有效范围为1970-2099年
                </p>
            </div>
            <div>
                <p>
                    “ * ” 表示所有值 在秒的位置写“ * ”表示每秒 
                </p>
                <p>
                    “ ? ” 用来指定“非明确的值” , ? 只有在“日期”和“星期”里面有，表示不确定的值，“日期”和“星期”可以看成是互斥的
                    <br/>
                    当使用日期时, 星期就应该写 ?
                    <br/>
                    同理, 当使用星期时, 日期就应该写 ?
                </p>
                <p>
                    “-”   表示至，例如日期中“2-5”，指的是2号、3号、4号、5号 
                </p>
                <p>
                    “，” 表示和，例如日期中“2,5”，指的是2号和5号 
                </p>
                <p>
                    “/”   表示增量，例如上面实现代码中的“0/10”，指的是每隔10秒
                </p>
            </div>
        </div>
        <div>
            0 0 10,14,16 * * ?           每天上午10点，下午2点，4点
            <br>
            0 0/30 9-17 * * ?            朝九晚五工作时间内每半小时
            <br>
            0 0 12 ? *                   WED 表示每个星期三中午12点
            <br>
            "0 0 12 * * ?"               每天中午12点触发
            <br>
            "0 15 10 ? * *"              每天上午10:15触发
            <br>
            "0 15 10 * * ?"              每天上午10:15触发
            <br>
            "0 15 10 * * ? *"            每天上午10:15触发
            <br>
            "0 15 10 * * ? 2017"         2017年的每天上午10:15触发
            <br>
            "0 * 14 * * ?"               在每天下午2点到下午2:59期间的每1分钟触发
            <br>
            "0 0/5 14 * * ?"             在每天下午2点到下午2:55期间的每5分钟触发
            <br>
            "0 0/5 14,18 * * ?"          在每天下午2点到2:55期间和下午6点到6:55期间的每5分钟触发
            <br>
            "0 0-5 14 * * ?"             在每天下午2点到下午2:05期间的每1分钟触发
            <br>
            "0 10,44 14 ? 3 WED"         每年三月的星期三的下午2:10和2:44触发
            <br>
            "0 15 10 ? * MON-FRI"        周一至周五的上午10:15触发
            <br>
            "0 15 10 15 * ?"             每月15日上午10:15触发
            <br>
            "0 15 10 L * ?"              每月最后一日的上午10:15触发
            <br>
            "0 15 10 ? * 6L"             每月的最后一个星期五上午10:15触发
            <br>
            "0 15 10 ? * 6L 2002-2005"   2002年至2005年的每月的最后一个星期五上午10:15触发
            <br>
            "0 15 10 ? * 6#3"        每月的第三个星期五上午10:15触发 
            <br>
        </div>

        <div>
            
            <p>Cron 表达式(使用 later.js, 不支持秒)</p>
            <input id="cron" type="text" name="cron" />
            <button type="button" onclick="parseCron()">解析</button>
        </div>
        
        <div>
            <div>接下来10次执行时间</div>
            <div id="content"></div>
        </div>
        
        <script>
            function parseCron() {
                var cron = document.getElementById('cron').value;    
                console.log('cron: ', cron);
                var s = later.parse.cron(cron);
                later.date.localTime();
                var results = later.schedule(s).next(10);
                
                var content = "";
                for (var i = 0; i < results.length; i++) {
                    content += results[i].toLocaleString() + "<hr/>";
                }
                
                document.getElementById("content").innerHTML = content;
            }
            
            
            function fold() {
                var detail = document.getElementById('detail')
                if (detail.classList.contains('no-display')) {
                    detail.classList.remove('no-display')
                } else {
                    detail.classList.add('no-display')
                }
            }
            
        </script>
    </body>
</html>